<template>
    <div>
        <div class="mainBox">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item><i class="el-icon-house"></i>首页</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div  class="welcome">欢迎使用后台管理系统！</div>
            <div class="count">
                <div
                    v-for="(item,index) in countItem"
                    :key="index">
                    <div class="countStyle">
                        <div class="pull_left">
                            <div :class="item.color">
                            <i :class="item.icon"></i>
                            </div>
                        </div>
                        <div class="pull_right">
                            <div>
                                <div>{{item.number}}</div>
                                <div>{{item.txt}}</div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="countFooter">
                        <div class="title">
                            <div class="pull_left">{{item.title}}</div>
                            <div class="pull_right">查看</div>
                            <div class="clear"></div>
                        </div>
                        <div 
                            class="bottom"
                            v-for="(itemm,indexx) in item.children"
                            :key="indexx"
                        >
                            <div>{{itemm.left}}</div>
                            <div>{{itemm.right}}</div>
                            <div><i class="el-icon-top"></i></div>
                        </div>
                    </div>
                 </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"systemHome",
    data() {
        return {
            countItem:[
                {
                    color:"green",
                    icon:"el-icon-user",
                    number:"48584",
                    txt:"商城用户",
                    title:"用户信息统计",
                    children:[
                        {
                            left:"会员数",
                            right:"4678"
                        },
                        {
                            left:"非会员数",
                            right:"4252"
                        },
                        {
                            left:"今日新增用户数",
                            right:"242"
                        },
                        {
                            left:"今日新增会员数",
                            right:"83"
                        },
                        {
                            left:"今日浏览人数",
                            right:"3225"
                        },
                    ]
                },
                {
                    color:"red",
                    icon:"el-icon-edit",
                    number:"168",
                    txt:"分销记录",
                    title:"商品统计信息",
                    children:[
                        {
                            left:"商品总数",
                            right:"478"
                        },
                        {
                            left:"已校验商品",
                            right:"478"
                        },
                        {
                            left:"上架商品",
                            right:"123"
                        },
                        {
                            left:"下架商品",
                            right:"83"
                        },
                        {
                            left:"待批准商品",
                            right:"153"
                        },
                    ]
                },
                {
                    color:"yellow",
                    icon:"el-icon-shopping-cart-2",
                    number:"23389",
                    txt:"商城订单",
                    title:"订单统计信息",
                    children:[
                        {
                            left:"未处理订单",
                            right:"131"
                        },
                        {
                            left:"待发放订单",
                            right:"234"
                        },
                        {
                            left:"已成交订单",
                            right:"35267"
                        },
                        {
                            left:"待清算订单",
                            right:"215"
                        },
                        {
                            left:"交易失败",
                            right:"383"
                        },
                    ]
                },
                {
                    color:"blue",
                    icon:"el-icon-s-operation",
                    number:"958647",
                    txt:"交易记录",
                    title:"库存预报",
                    children:[
                        {
                            left:"便携式纸巾",
                            right:"4678"
                        },
                        {
                            left:"便携式纸巾",
                            right:"4252"
                        },
                        {
                            left:"便携式纸巾",
                            right:"242"
                        },
                        {
                            left:"便携式纸巾",
                            right:"83"
                        },
                        {
                            left:"便携式纸巾",
                            right:"3225"
                        },
                    ]
                }
            ],
           
        }
    },
  mounted() {
  },
  methods: {
        
  }
}
</script>
<style scoped>
.countFooter{
    border: 1px solid #ccc;
    margin-top: 15px;
}
.countFooter>.title{
    padding: 10px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    background-color: rgba(116, 116, 116, 0.3);
    font-size: 13px;
}
.countFooter>.title>div:nth-child(1){
    font-weight: bold;
}
.countFooter>.title>div:nth-child(2){
    color: blue;
}
.bottom{
    border-bottom: 1px solid #ccc;
    padding: 10px 15px 10px 20px;
    display: flex;
}
.bottom>div:nth-child(1){
    width: 65%;
}
.bottom>div:nth-child(2){
    color: orange;
    width: 30%;
}
.bottom>div:nth-child(3){
    width: 5%;
    color: grey;
}
.countFooter>div:last-child{
    border-bottom: none;
}
.pull_left{
    float: left;
}
.pull_right{
    float: right;
}
.clear{
    clear: both;
}
.mainBox{
    margin-left: 10px;
}
.welcome{
    width: 95%;
    margin: 20px 0;
    height: 20px;
    line-height: 20px;
    border: 1px solid greenyellow;
    color: green;
    text-align: center;
}
.green{
    background-color: #37CECC;
}
.red{
    background-color: #F94E55;
}
.yellow{
    background-color: #FFC246;
}
.blue{
    background-color: #41AAFF;
}
.count{
    width: 95%;
    display: flex;
    justify-content: space-between;
}
.countStyle{
    border: 1px solid #ccc;
    width: 200px;
    height: 50px;
    display: flex;

}
.countStyle>div:first-child{
    width: 40%;
    line-height: 50px;
    font-size: 25px;
    text-align: center;
    color: #fff;
}
.countStyle>div:nth-child(2){
    width: 60%;
    height: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 16px;
}
</style>